<template>
  <!-- 作业管理默认--------------------------------------  p2------------------------------------------------ -->

  <div>
    <!--  -->
    <div class="container-homework seach_box">
      <!-- 筛选搜索 -->
      <div class="screen">
        <div class="onerow">
          <el-input
            v-model="search.workId"
            placeholder="请输入作业ID"
            clearable
          ></el-input>
          <el-input
            v-model="search.name"
            placeholder="请输入教师姓名"
            clearable
          ></el-input>
        </div>
        <div class="tworow">
          <div class="twoleft">
            <el-select v-model="search.class" placeholder="班级">
              <!-- <el-option label="男" value="0"></el-option>
            <el-option label="女" value="1"></el-option> -->
            </el-select>
            <el-select v-model="search.type" placeholder="作业类型">
              <!-- <el-option label="男" value="0"></el-option>
            <el-option label="女" value="1"></el-option> -->
            </el-select>
            <el-select v-model="search.state" placeholder="状态">
              <!-- <el-option label="男" value="0"></el-option>
            <el-option label="女" value="1"></el-option> -->
            </el-select>
            <el-select v-model="search.ach" placeholder="成绩">
              <!-- <el-option label="男" value="0"></el-option>
            <el-option label="女" value="1"></el-option> -->
            </el-select>
            <el-button @click="searchWork">搜索</el-button>
          </div>
          <div class="tworight">
            <el-button>重置搜索</el-button>
            <el-button @click="$router.push('/assignment')">布置作业</el-button>
            <el-button>导出列表</el-button>
          </div>
        </div>
      </div>
    </div>

    <!-- 盒子 -->
    <div class="train_nav">
      <div class="show_one">
        <p>5543</p>
        <p>平均个数(个)</p>
      </div>
      <div class="show_one">
        <p>151</p>
        <p>跳绳中位数(个)</p>
      </div>
      <div class="show_one">
        <p>432</p>
        <p>最多个数(个)</p>
      </div>
      <div class="show_one">
        <p>8901.2</p>
        <p>最少个数(个)</p>
      </div>
      <div class="show_one">
        <p>3143</p>
        <p>平均能耗(kcal)</p>
      </div>
    </div>

    <!-- 跌级柱状图 -->
    <div class="class_jun">
      <p>年级平均成绩比例</p>
      <div class="jun_box">
        <div class="jun_left">
          <div>
            <div
              id="main_pie1"
              style="width: 5.3083rem; height: 1.5625rem; margin: 0 auto"
            ></div>
          </div>
        </div>
        <div class="jun_right">
          <div class="main_text">
            <p v-for="(item, index) in pie_arr" :key="index">
              <span :style="{ background: item.color }"></span>
              <span>{{ item.name }} {{ item.num }}</span>
              <span>男 {{ item.nan }}</span>
              <span>女 {{ item.nv }}</span>
            </p>
          </div>
        </div>
      </div>
    </div>

    <!-- 折线图 -->
    <div class="axis_box">
      <div class="axis_title">
        <p>随堂测试- 平均跳绳个数</p>
        <div class="axis_zhi">
          <p v-for="(item, index) in axis_arr" :key="index">
            <span :style="{ background: item.color }"></span
            ><span>{{ item.name }}</span>
          </p>

          <el-select v-model="search.type" placeholder="体测成绩">
            <!-- <el-option label="男" value="0"></el-option>
            <el-option label="女" value="1"></el-option> -->
          </el-select>
        </div>
      </div>
      <div class="axis_content">
        <div
          id="main_axis"
          style="width: 7.5083rem; height: 2.0833rem; margin: 0 auto"
        ></div>
      </div>
    </div>

    <!-- 作业提交率 -->
    <div class="axis_box">
      <div class="axis_title">
        <p>学生作业提交率</p>
        <div class="axis_ti">
          <el-select v-model="search.type" placeholder="年">
            <!-- <el-option label="男" value="0"></el-option>
            <el-option label="女" value="1"></el-option> -->
          </el-select>
          <el-select
            v-model="search.type"
            class="zidingyi"
            placeholder="九年级(8)班"
          >
            <!-- <el-option label="男" value="0"></el-option>
            <el-option label="女" value="1"></el-option> -->
          </el-select>
        </div>
      </div>
      <div class="axis_content">
        <div
          id="main_axis_ti"
          style="width: 7.5083rem; height: 2.0833rem; margin: 0 auto"
        ></div>
      </div>
    </div>

    <!-- 最新作业排名 -->
    <!-- 作业提交率 -->
    <div class="axis_box">
      <div class="axis_title">
        <p>最新作业排名</p>
        <div class="axis_ti">
          <el-select v-model="search.type" placeholder="年">
            <!-- <el-option label="男" value="0"></el-option>
            <el-option label="女" value="1"></el-option> -->
          </el-select>
          <el-select
            v-model="search.type"
            class="zidingyi"
            placeholder="九年级(8)班"
          >
            <!-- <el-option label="男" value="0"></el-option>
            <el-option label="女" value="1"></el-option> -->
          </el-select>
        </div>
      </div>

      <!-- 内容列表 -->
      <div class="conList">
        <el-table :data="tableData" v-loading="loading" style="width: 100%">
          <el-table-column prop="id" label="排名" width="80"> </el-table-column>
          <el-table-column prop="workId" label="头像" width="120">
          </el-table-column>
          <el-table-column prop="classId" label="姓名">
            <template slot-scope="scope">{{ scope.row.classId }}</template>
          </el-table-column>
          <el-table-column prop="teacherId" label="班级">
            <template slot-scope="scope">{{ scope.row.teacherId }}</template>
          </el-table-column>
          <el-table-column prop="workType" label="分数">
            <template slot-scope="scope">{{ scope.row.workType }}</template>
          </el-table-column>
          <el-table-column prop="workContent" label="分数浮动">
          </el-table-column>

          <el-table-column prop="operation" label="操作">
            <template slot-scope="scope">
              <!-- <el-button
              type="primary"
              @click="toEdit(scope.row.id)"
            >操作</el-button> -->
              <el-select
                v-model="operVal"
                @change="change(scope.row.id)"
                placeholder="操作"
              >
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination
          background
          layout="total, prev, pager, next"
          :total="total"
          :page-size="pageSize"
          :current-page="page"
          @current-change="changePage"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'homework-sup',
  data() {
    return {
      search: {
        // 班级
        class: '',
        // 作业类型
        type: '',
        // 状态
        state: '',
        ach: '',
        // 作业ID
        workId: '',
        // 教师姓名
        name: '',
        // 自定义
        custom: ''
      },
      // 总条数
      total: 0,
      // 每页多少条
      pageSize: 8,
      //页码
      page: 0,
      offset: 0,
      // 数据加载时
      loading: true,
      // 列表数据
      tableData: [{
        id: 1,
        workId: 1,
        classId: 2,
        teacherId: '小王',
        workType: '数学',
        workContent: '寒假作业',
        progress: '60%',
        state: '进行中',
        result: '暂无',
        createTime: '2020-20-12'
      }],
      options: [{
        value: '1',
        label: '删除'
      }, {
        value: '2',
        label: '详情'
      }],
      // operVal
      operVal: '',
      pie_arr: [
        { name: '优秀', color: '#0FDD8D', nan: 200, nv: 300, num: '30%' },
        { name: '及格', color: '#7AEEEE', nan: 200, nv: 300, num: '30%' },
        { name: '良好', color: '#A7F7D2', nan: 200, nv: 300, num: '30%' },
        { name: '不及格', color: '#FDE08C', nan: 200, nv: 300, num: '30%' }
      ],
      axis_arr: [
        { name: '协调', color: '#24AAFF' },
        { name: '速度', color: '#0FDD8D' },
        { name: '平衡', color: '#FFD02E' },
        { name: '力量', color: '#FE7C73' },
        { name: '敏捷', color: '#38F1FF' }
      ],
    }
  },
  created() {
    this.getWorkTable()
    this.$store.commit('common/workTabPane', { url: 'homework' })

  },
  mounted() {
    this.$nextTick(function () {

      this.myEcharts_pie1();
      this.myEcharts_axis();
      this.myEcharts_axis_ti();
    })

  },
  methods: {


    myEcharts_axis_ti() {
      let myChart = this.$echartsd.init(document.getElementById('main_axis_ti'))
      let option = {
        title: {
          text: ''
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['提交率'],
          show: false
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        color: ['#0FDD8D'],
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '提交率',
            type: 'line',
            stack: '总量',
            data: [120, 132, 101, 134, 90, 230, 210, 132, 101, 134, 90, 230]
          }
        ]
      };
      myChart.setOption(option)
    },

    myEcharts_axis() {
      let myChart = this.$echartsd.init(document.getElementById('main_axis'))
      let option = {
        title: {
          text: ''
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['协调', '速度', '平衡', '力量', '敏捷'],
          show: false
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        color: ['#24AAFF', '#0FDD8D', '#FFD02E', '#FE7C73', '#38F1FF'],
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['一年级', '二年级', '三年级', '四年级', '五年级', '六年级', '七年级', '八年级', '九年级', '十年级', '十一年级', '十二年级']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '协调',
            type: 'line',
            stack: '总量',
            data: [120, 132, 101, 134, 90, 230, 210, 132, 101, 134, 90, 230]
          },
          {
            name: '速度',
            type: 'line',
            stack: '总量',
            data: [220, 182, 191, 234, 290, 330, 310, 132, 101, 134, 90, 230]
          },
          {
            name: '平衡',
            type: 'line',
            stack: '总量',
            data: [150, 232, 201, 154, 190, 330, 410, 132, 101, 134, 90, 230]
          },
          {
            name: '力量',
            type: 'line',
            stack: '总量',
            data: [232, 201, 154, 190, 330, 410, 132, 101, 134, 90, 230, 150]
          },
          {
            name: '敏捷',
            type: 'line',
            stack: '总量',
            data: [150, 232, 201, 190, 330, 410, 132, 101, 134, 90, 230, 154]
          }
        ]
      };
      myChart.setOption(option)
    },

    myEcharts_pie1() {
      let myChart = this.$echartsd.init(document.getElementById('main_pie1'))
      let option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        legend: {
          data: ['优秀', '良好', '及格', '不及格'],
          show: false,
        },
        color: ['#0FDD8D', '#7AEEEE', '#A7F7D2', '#FDE08C'],
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: ['一年级', '二年级', '三年级', '四年级', '五年级', '六年级', '七年级', '八年级', '九年级', '十年级', '十一年级', '十二年级']
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '优秀',
            type: 'bar',
            stack: '成绩',
            barWidth: 18,
            data: [320, 332, 301, 334, 390, 330, 320, 332, 301, 334, 390, 330]
          },
          {
            name: '良好',
            type: 'bar',
            stack: '成绩',
            data: [120, 132, 101, 134, 90, 230, 210, 332, 301, 334, 390, 330]
          },
          {
            name: '及格',
            type: 'bar',
            stack: '成绩',
            data: [220, 182, 191, 234, 290, 330, 310, 332, 301, 390, 330, 320]
          },
          {
            name: '不及格',
            type: 'bar',
            stack: '成绩',
            data: [150, 232, 201, 154, 190, 330, 410, 332, 301, 334, 390, 320]
          }
        ]
      };
      myChart.setOption(option)
    },
    searchWork() {
      this.$router.push({ path: '/commission_default' })
    },
    // 作业管理默认首页列表--------------------------------------------------------------------------
    getWorkTable() {
      this.$http({
        url: this.$http.adornUrl('queryPageWork'),
        method: 'POST',
        data: {
          "sort": true,
          "offset": this.offset,
          "pageSize": this.pageSize,
          "queryParam": JSON.parse(sessionStorage.getItem('userMsg'))
        }
      }).then(res => {
        console.log('作业管理-首页列表', res);
        if (res.status === 200) {
          this.tableData = res.data.rows
          this.total = res.data.total
          this.loading = false
        }
      })
    },
    // 操作
    change(id) {
      if (this.operVal === '2') {
        this.$router.push({ path: `/commission_details`, query: { id } })
        this.operVal = ''
      } else {
        this.$confirm('此操作将删除该作业, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.delWorkTable()
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
        this.operVal = ''
      }
    },
    // 删除作业管理列表数据
    delWorkTable() {
      // this.$http({
      //   url: this.$http.adornUrl('queryPageWorkDetail'),
      //   method: 'POST',
      //   data: {
      //     "sort": true,
      //     "offset": 0,
      //     "pageSize": 10,
      //     "queryParam": JSON.parse(sessionStorage.getItem('userMsg'))
      //   }
      // }).then(res => {
      //   console.log('dddddddddddddddddddddddddddddddddddddd', res);
      //   this.tableData = res.data.rows
      // })
    },
    // 分页函数
    changePage(newPage) {
      this.page = newPage; //页码
      console.log(newPage);
      this.offset = this.pageSize * (newPage - 1);
      this.getWorkTable()
    }
  }
}
</script>

<style lang="scss" scoped>
.seach_box {
  margin-bottom: 0.1302rem;
}
.zidingyi {
  /deep/ .el-input__inner,
  /deep/.el-input .el-input__count .el-input__count-inner {
    background-color: #f7fbfc;
    line-height: 0.2188rem;
    width: 0.9396rem !important;
    border-radius: 0.0521rem;
  }
}
/deep/.el-table th {
  font-size: 0.0938rem;
}
.container-homework {
  padding: 0.1667rem 0.1406rem;
  background-color: #fff;
  border-radius: 0.0781rem;
  // 筛选部分
  .screen {
    .onerow {
      display: flex;
      /deep/.el-input--suffix .el-input__inner,
      .el-input--medium {
        background-color: #f7fbfc;
        height: 0.2188rem;
        width: 1.25rem;
        margin-right: 0.1927rem;
        border-radius: 0.0521rem;
      }
    }
    .tworow {
      display: flex;
      justify-content: space-between;
      .twoleft {
        /deep/.el-input--medium .el-input__inner,
        .el-input--suffix .el-input__inner,
        .el-select .el-input__inner {
          background-color: #f7fbfc;
          height: 0.2188rem;
          width: 0.7396rem;
          border-radius: 0.0521rem;
        }
        .el-select {
          margin: 0.1042rem 0.1042rem 0 0;
        }
        .el-button {
          width: 0.4479rem;
          height: 0.2188rem;
          background: #0fdd8d;
          color: #fff;
          border-radius: 0.0521rem;
        }
      }
      .tworight {
        margin-top: 0.1042rem;
        .el-button {
          width: 0.7396rem;
          height: 0.2188rem;
          background: #f7fbfc;
          border-radius: 0.0521rem;
        }
        .el-button:nth-child(2) {
          background-color: #24aaff;
          color: #fff;
        }
        .el-button:nth-child(3) {
          background-color: #0fdd8d;
          color: #fff;
        }
      }
    }
  }
  // 内容列表
  .conList {
    .conHeader {
      display: flex;
      justify-content: space-between;
      line-height: 0.1875rem;
      font-size: 0.0729rem;
      margin-bottom: 0.0781rem;
      div {
        color: #525252;
        span {
          color: #888888;
        }
      }
      /deep/.el-select > .el-input--medium > .el-input__inner,
      /deep/.el-input .el-input__count .el-input__count-inner {
        background-color: #f7fbfc;
        line-height: 0.2188rem;
        width: 0.7396rem;
        border-radius: 0.0521rem;
      }
    }
    .el-table {
      /deep/.el-input--medium .el-input__inner,
      .el-input--suffix .el-input__inner,
      .el-select .el-input__inner {
        width: 0.4479rem;
        height: 0.1875rem;
        background: #f8f8f8;
        border-radius: 0.0938rem;
        padding: 0 0.1042rem 0 0.1302rem;
        color: #888888;
      }
      /deep/.el-input__suffix {
        display: none;
      }
    }
  }
}

.train_nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.1302rem;
  .show_one {
    width: 18.5%;
    border-radius: 0.0417rem;
    padding: 0.1458rem 0 0.2083rem 0;
    text-align: center;
    background-color: white;
    > p:nth-of-type(1) {
      font-size: 0.1875rem;
      color: #fff;
      margin-bottom: 0.0417rem;
      color: #0fdd8d;
    }
    > p:nth-of-type(2) {
      font-size: 0.0625rem;
      color: #888;
    }
  }
  .train_one {
    width: 18.5%;
    border-radius: 0.0417rem;
    padding: 0.1458rem 0 0.2083rem 0;
    text-align: center;
    > p:nth-of-type(1) {
      font-size: 0.0625rem;
      color: #fff;
    }
    > p:nth-of-type(2) {
      font-size: 0.1875rem;
      color: #fff;
      margin: 0.0417rem 0;
    }
    > div {
      display: flex;
      align-items: center;
      justify-content: center;
      img {
        width: 0.1042rem;
        height: 0.1042rem;
        margin-right: 0.026rem;
      }
      p {
        font-size: 0.0938rem;
        color: #fff;
      }
    }
  }
  .train_one:nth-of-type(1) {
    background-color: #24aaff;
  }
  .train_one:nth-of-type(2) {
    background-color: #0fdd8d;
  }
  .train_one:nth-of-type(3) {
    background-color: #ffd02e;
  }
  .train_one:nth-of-type(4) {
    background-color: #fe7c73;
  }
  .train_one:nth-of-type(5) {
    background-color: #38f1ff;
  }
}

.class_jun {
  padding: 0.1771rem 0.151rem;
  background-color: white;
  border-radius: 0.0781rem;
  margin-bottom: 0.1302rem;
  > p {
    font-size: 0.0938rem;
    color: #525252;
  }
}
.jun_box {
  display: flex;
  justify-content: space-between;
  .jun_left {
    width: 75%;
  }
  .jun_right {
    padding-top: 0.2563rem;
    width: 22%;
    display: flex;
    align-items: center;
    justify-content: center;
    .main_text > p {
      display: flex;
      align-items: center;
      margin-bottom: 0.2083rem;
      span {
        font-size: 0.0625rem;
        color: #888888;
        margin-right: 0.1563rem;
      }
      > span:nth-of-type(1) {
        width: 0.0729rem;
        height: 0.0729rem;
        border-radius: 50%;
        margin-right: 0.0521rem;
      }
    }
    .main_text > p:last-child {
      margin-bottom: 0;
    }
  }
}
.axis_box {
  padding: 0.151rem;
  border-radius: 0.0781rem;
  background-color: white;
  margin-bottom: 0.1302rem;
  .axis_title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.1302rem;
    > p {
      font-size: 0.0938rem;
      color: #525252;
    }
  }
}
.axis_ti {
  display: flex;
  align-items: center;
  /deep/.el-input--medium .el-input__inner,
  .el-input--suffix .el-input__inner,
  .el-select .el-input__inner {
    background-color: #f7fbfc;
    height: 0.2188rem;
    width: 0.7396rem;
    border-radius: 0.0521rem;
  }
  .el-select {
    margin: 0 0.1042rem 0 0;
  }
  .el-button {
    width: 0.4479rem;
    height: 0.2188rem;
    background: #0fdd8d;
    color: #fff;
    border-radius: 0.0521rem;
  }
}
.axis_zhi {
  display: flex;
  align-items: center;
  p {
    display: flex;
    align-items: center;
    margin-right: 0.1302rem;
    > span:nth-of-type(1) {
      width: 0.1146rem;
      height: 0.1146rem;
      border-radius: 50%;
      margin-right: 0.0521rem;
    }
    > span:nth-of-type(2) {
      color: #888888;
      font-size: 0.0938rem;
    }
  }
  /deep/.el-input--medium .el-input__inner,
  .el-input--suffix .el-input__inner,
  .el-select .el-input__inner {
    background-color: #f7fbfc;
    height: 0.2188rem;
    width: 0.7396rem;
    border-radius: 0.0521rem;
  }
  .el-select {
    margin: 0 0.1042rem 0 0;
  }
  .el-button {
    width: 0.4479rem;
    height: 0.2188rem;
    background: #0fdd8d;
    color: #fff;
    border-radius: 0.0521rem;
  }
}
.el-button {
  padding: 0;
}
</style>
